﻿<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>网站名称</title>
  <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
  <link rel="stylesheet" type="text/css" href="css/share.min.css" />
  <link rel="stylesheet" type="text/css" href="css/style.css" />
  <!--[if lt IE 9]>
  <script>self.location="browser/upgrade.html";</script>  
  <![endif]-->
</head>

<body class="bj-main">
  <div id="app">
    <div class="headern">
      <div class="top">
        <div class="container">
          <div class="fl"><a href="#">返回首页</a> | 欢迎来到数字资源管理系统</div>
          <div class="fr"><a href="#">登录</a> | <a href="#">注册</a></div>
        </div>
      </div>
      <div class="head">
        <div class="container">
          <div class="logo"><a href="/"><img src="img/logo.png"/></a></div>
          <form action="">
            <div class="box-search">
              <select name="way">
                <option value="all">全文</option>
                <option value="title">标题</option>
              </select>
              <input type="text" name="keywords" autocomplete="off" placeholder="全球治理 一带一路 宏观经济 甲骨文 群体事件"/>
              <input type="submit" value="搜索"/>
            </div>
          </form>
        </div>
      </div>
      <div class="container">
        <div class="nav">
          <ul class="clearfix">
            <li class="cur"><a href="#">首页</a></li>
            <li><a href="#">图书库</a></li>
            <li><a href="#">辞书库</a></li>
            <li><a href="#">视频库</a></li>
            <li><a href="#">专家库</a></li>
            <li><a href="#">报刊库</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="sys-main clearfix">
        <div class="sys-position">当前位置：<a href="#">首页</a> > 资源列表</div>
        <div class="sys-main-fl">
          <div class="list-cate">
            <div class="tit"><span>中图法分类</span><i class="fa" :class="show.guofa ? 'fa-angle-up' : 'fa-angle-down'" @click="cateToggle('guofa')"></i></div>
            <ew-cate @select-change='cateChange' :model="ajdatas.guofa" field="guofa" v-show="show.guofa" :value="cateVal.guofa"></ew-cate>
          </div>
          <div class="list-cate">
            <div class="tit"><span>资源类型</span><i class="fa" :class="show.ziyuan ? 'fa-angle-up' : 'fa-angle-down'" @click="cateToggle('ziyuan')"></i></div>
            <ew-cate @select-change='cateChange' :model="ajdatas.ziyuan" field="ziyuan" v-show="show.ziyuan" :value="cateVal.ziyuan"></ew-cate>
          </div>
          <div class="list-cate">
            <div class="tit"><span>作者</span><i class="fa" :class="show.zuozhe ? 'fa-angle-up' : 'fa-angle-down'" @click="cateToggle('zuozhe')"></i></div>
            <ew-cate @select-change='cateChange' :model="ajdatas.zuozhe" field="zuozhe" v-show="show.zuozhe" :value="cateVal.zuozhe"></ew-cate>
          </div>
          <div class="list-cate">
            <div class="tit"><span>出版日期</span><i class="fa" :class="show.chuban ? 'fa-angle-up' : 'fa-angle-down'" @click="cateToggle('chuban')"></i></div>
            <ew-cate @select-change='cateChange' :model="ajdatas.chuban" field="chuban" v-show="show.chuban" :value="cateVal.chuban"></ew-cate>
            <div class="datesearch">
              <div class="group"><input type="text" maxlength="4" v-model="dateSelect.min"/><span>年</span></div>
              <div class="line">--</div>
              <div class="group"><input type="text" maxlength="4" v-model="dateSelect.max"/><span>年</span></div>
              <a href="javascript:;" @click="dateSubmit">确认</a>
            </div>
          </div>
        </div>
        <div class="sys-main-fr">
          <div class="list-search">
            <div class="search-default">
              <span>结果中搜索：</span>
              <div class="box">
                <select name="way" v-model="search.way">
                  <option value="">全部</option>
                  <option value="title">标题</option>
                  <option value="author">作者</option>
                </select>
                <input type="text" name="keywords" v-model="search.keywords" autocomplete="off" placeholder="请输入内容"/>
              </div>
              <div class="but"><a href="javascript:;" @click="searchSubmit">检索</a><a href="javascript:;" @click="searchReset">清空</a></div>
            </div>
            <div class="screen-default">
              <div class="fl">
                <span>排序：</span>
                <a href="javascript:;" @click="orderChange('default')" :class="{cur:search.orderType=='default'}">默认排序<i class="fa" v-show="search.orderType=='default'" :class="search.orderVal=='desc' ? 'fa-long-arrow-down' : 'fa-long-arrow-up'"></i></a>
                <a href="javascript:;" @click="orderChange('xiangguan')" :class="{cur:search.orderType=='xiangguan'}">相关度<i class="fa" v-show="search.orderType=='xiangguan'" :class="search.orderVal=='desc' ? 'fa-long-arrow-down' : 'fa-long-arrow-up'"></i></a>
                <a href="javascript:;" @click="orderChange('chuban')" :class="{cur:search.orderType=='chuban'}">出版日期<i class="fa" v-show="search.orderType=='chuban'" :class="search.orderVal=='desc' ? 'fa-long-arrow-down' : 'fa-long-arrow-up'"></i></a>
                <a href="javascript:;" @click="orderChange('dianji')" :class="{cur:search.orderType=='dianji'}">点击量<i class="fa" v-show="search.orderType=='dianji'" :class="search.orderVal=='desc' ? 'fa-long-arrow-down' : 'fa-long-arrow-up'"></i></a>
              </div>
              <div class="fr">
                <span>每页显示：</span>
                <select v-model="search.page" @change="pageChange">
                  <option value="10">10</option>
                  <option value="20">20</option>
                  <option value="30">30</option>
                  <option value="40">40</option>
                  <option value="50">50</option>
                  <option value="100">100</option>
                </select>
                <span>条</span>
              </div>
            </div>
          </div>
          <div class="list-book">
            <div class="list-book-item" v-for="item in ajdatas.lists">
              <a :href="item.url" class="pic"><img :src="item.img"/></a>
              <div class="info">
                <a :href="item.url" class="bt">{{ item.title }}</a>
                <ul class="param">
                  <li>作者：<a href="#">曾繁仁</a></li>
                  <li>出版日期：2021-01-01</li>
                  <li>ISBN：978-7-5203-7652-5</li>
                  <li>字数：1942千字</li>
                  <li>引用量：0</li>
                  <li>点击量：42</li>
                </ul>
                <div class="cate">
                  <div class="fl">中图法分类：</div>
                  <div class="fr"><a href="#">哲学、宗教</a> > <a href="#">欧洲哲学</a> > <a href="#">欧洲各国哲学</a> > <a href="#">德国哲学</a> > <a href="#">十八世纪~十九世纪前期哲学</a><span class="last"><a href="#">康德(Kant,I.1724~1804年)</a><em><i class="fa fa-plus"></i><span>加关注</span></em></span><br/><a href="#">哲学、宗教</a> > <a href="#">欧洲哲学</a> > <a href="#">欧洲各国哲学</a> > <a href="#">德国哲学</a> > <a href="#">十八世纪~十九世纪前期哲学</a><span class="last"><a href="#">黑格尔(Hegel,G.W.F.1770~1831年)</a><em><i class="fa fa-plus"></i><span>加关注</span></em></span></div>
                </div>
                <div class="key">关键词：<span><i class="fa fa-plus"></i>美学</span><span><i class="fa fa-plus"></i>文集</span></div>
                <a :href="item.url" class="desc">简介：主 任　张　江副　主　任　张政文 赵剑英编委会成员　党圣元 丁国旗 段吉方 高建平李春青 祁海文 苏宏斌 孙士聪谭好哲 王　宁 吴子林 曾　军张　跣 周　宪 朱立元古典美学以主体与客体、理性与感性的对立统一为其主线，发展到19世纪中叶，以黑格尔的“美是理念的感性显现”为其顶峰。但也从这时起，美学领域以叔本华为起点开始走上...</a>
              </div>
              <div class="clearfix"></div>
              <div class="share clearfix">
                <span class="shareBtn"><i class="fa fa-share-square-o"></i>分享<div class="shareGroup shareid0" data-sites="wechat, weibo, qq, qzone" :data-title="item.title" :data-url="item.url" ></div></span>
                <span><i class="fa fa-star-o"></i>收藏</span>
              </div>
            </div>
          </div>
          <div class="pagebar">
            <a href="#">&lt;</a>
            <span class="cur">1</span>
            <a href="#">2</a>
            <a href="#">3</a>
            <a href="#">4</a>
            <a href="#">5</a>
            <a href="#">6</a>
            <a href="#">7</a>
            <a href="#">8</a>
            <a href="#">&gt;</a>
            <div class="gobox">跳转至<input type="text" value="1"/>页</div>
            <span>共 701 页</span>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="container">
        <div class="content">
          <div class="logo"><img src="img/logo.png"/></div>
          <ul>
            <li><i class="fa fa-phone"></i>010-84883678</li>
            <li><i class="fa fa-envelope"></i>136983991@qq.com</li>
            <li><i class="fa fa-map-marker"></i>北京市东城区朝阳门内南小街51号</li>
          </ul>
        </div>
        <div class="nav">
          <div class="tit">快速链接</div>
          <ul class="er">
            <li><a href="#">关于我们</a></li>
            <li><a href="#">信息公告</a></li>
            <li><a href="#">客服中心</a></li>
            <li><a href="#">版权公告</a></li>
            <li><a href="#">在线咨询</a></li>
          </ul>
        </div>
        <div class="nav">
          <div class="tit">网站群</div>
          <ul>
            <li><a href="#">语文出出版社</a></li>
            <li><a href="#">数字语文资源网</a></li>
            <li><a href="#">中华人民共和国教育部</a></li>
          </ul>
        </div>
      </div>
      <div class="copy">
        <div class="container">版权所有：语文出版社 <a href="#">京ICP备11009062号-6</a></div>
      </div>
    </div>
  </div>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <!-- 生产环境版本，优化了尺寸和速度 -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> -->
  <script type="text/javascript" src="js/browser.min.js"></script>
  <script type="text/javascript" src="js/polyfill.min.js"></script>
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/layer/layer.js"></script>
  <script type="text/javascript" src="js/SuperSlide.js"></script>
  <script type="text/javascript" src="js/axios.min.js"></script>
  <script type="text/javascript" src="js/jquery.share.min.js"></script>
  <script type="text/javascript" src="js/component/cate.js" type="text/babel"></script>
  <script type="text/javascript" src="js/module/list_books.js" type="text/babel"></script>
</body>

</html>